<template>
  <div class="menu-warp">
    <div v-for="(item, index) in menus" :key="index">
      <div class="menu-warp-header">
        {{ item.title }}
      </div>
      <div class="menu-warp-list">
        <ul>
          <li v-for="(item2, index2) in item.list" :key="index2" @click="handleClickMenu(item2)">
            {{ item2.t1 }}<span>{{ item2.t2 }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { injectAppNavigator } from '../navigator/app.navigator'
import { MENUS, AppMenu, menus } from './menu'
export default {
  name: 'app-menu',
  props: {
    currentPath: { type: String },
  },
  setup() {
    const navigator = injectAppNavigator()
    return {
      menus,
      handleClickMenu(menu: AppMenu) {
        navigator.methods.go(menu.page)
      },
    }
  },
}
</script>

<style lang="scss" scoped>
.menu-warp {
  padding-top: 20px;
  padding-left: 20px;
  .menu-warp-header {
    font-size: 16px;
    color: green;
  }
  .menu-warp-list {
    font-size: 18px;
    color: #000;
    li {
      list-style: none;
      margin: 10px 0;
      cursor: pointer;
      &:hover {
        color: green;
      }
      span {
        color: #c0c4cc;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}
</style>
